@import "../../var";
@import "../../mixin";
.gzl-tag {
  display: inline-block;
  font-size: px(10);
  padding: 0 px(8);
  line-height: px(16);
  border-radius: px(8);
  color: $clr-g8;
  background: $clr-bg;
}
.gzl-tag_coupon {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-size: px(12);
  background-image: $clr-gradient-orange;
  color: $clr-white;
  padding: 0 px(8);
  text-align: center;
  min-width: px(50);
  line-height: px(24);
  &:not(:first-child) {
    margin-left: px(12);
  }
  &:before,
  &:after {
    content: '';
    width: 0;
    height: 100%;
    position: absolute;
    top: px(2);
  }
  &:before {
    border-right: px(2) dotted white;
    left: px(-1);
  }
  &:after {
    border-left: px(2) dotted white;
    right: px(-1);
  }
  em {
    &:before,
    &:after {
      content: '';
      width: px(4);
      height: px(4);
      position: absolute;
      left: px(16);
      background: $clr-white;
      border-radius: 50%;
    }
    &:before {
      top: px(-2);  
    }
    &:after {
      bottom: px(-2);
    }
  }
}